<template>
  <div class="jlpt-exam">
    <div class="page-header">
      <h1>{{ $t('exam.jlpt') }}</h1>
      <p class="subtitle">JLPT日语能力考试培训，提升日语水平，获得国际认证</p>
    </div>

    <div class="content-wrapper">
      <!-- 考试介绍 -->
      <el-card class="exam-intro">
        <template #header>
          <div class="card-header">
            <span>考试介绍</span>
          </div>
        </template>
        <div class="intro-content">
          <p>JLPT（Japanese Language Proficiency Test）是由日本国际交流基金会和日本国际教育支援协会主办的日语能力考试，是国际上最具权威性的日语水平测试。</p>
          <div class="jlpt-levels">
            <h3>考试等级：</h3>
            <el-row :gutter="20">
              <el-col :span="6" v-for="level in jlptLevels" :key="level.name">
                <div class="level-card" :class="level.class">
                  <div class="level-header">
                    <h4>{{ level.name }}</h4>
                    <span class="level-tag">{{ level.tag }}</span>
                  </div>
                  <p>{{ level.description }}</p>
                  <div class="level-details">
                    <span>词汇：{{ level.vocabulary }}</span>
                    <span>语法：{{ level.grammar }}</span>
                    <span>阅读：{{ level.reading }}</span>
                    <span>听力：{{ level.listening }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>

      <!-- 考试结构 -->
      <el-card class="exam-structure">
        <template #header>
          <div class="card-header">
            <span>考试结构</span>
          </div>
        </template>
        <el-tabs v-model="activeTab" type="border-card">
          <el-tab-pane label="N1" name="N1">
            <div class="tab-content">
              <h4>N1级别考试结构</h4>
              <el-timeline>
                <el-timeline-item timestamp="110分钟" placement="top">
                  <h5>语言知识·阅读</h5>
                  <p>包含文字词汇、语法、阅读理解等部分</p>
                </el-timeline-item>
                <el-timeline-item timestamp="60分钟" placement="top">
                  <h5>听力</h5>
                  <p>包含理解内容、理解要点、理解概要等部分</p>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
          <el-tab-pane label="N2" name="N2">
            <div class="tab-content">
              <h4>N2级别考试结构</h4>
              <el-timeline>
                <el-timeline-item timestamp="105分钟" placement="top">
                  <h5>语言知识·阅读</h5>
                  <p>包含文字词汇、语法、阅读理解等部分</p>
                </el-timeline-item>
                <el-timeline-item timestamp="50分钟" placement="top">
                  <h5>听力</h5>
                  <p>包含理解内容、理解要点、理解概要等部分</p>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
          <el-tab-pane label="N3" name="N3">
            <div class="tab-content">
              <h4>N3级别考试结构</h4>
              <el-timeline>
                <el-timeline-item timestamp="30分钟" placement="top">
                  <h5>语言知识</h5>
                  <p>包含文字词汇、语法部分</p>
                </el-timeline-item>
                <el-timeline-item timestamp="70分钟" placement="top">
                  <h5>阅读</h5>
                  <p>包含阅读理解部分</p>
                </el-timeline-item>
                <el-timeline-item timestamp="40分钟" placement="top">
                  <h5>听力</h5>
                  <p>包含理解内容、理解要点等部分</p>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
          <el-tab-pane label="N4/N5" name="N4N5">
            <div class="tab-content">
              <h4>N4/N5级别考试结构</h4>
              <el-timeline>
                <el-timeline-item timestamp="25分钟" placement="top">
                  <h5>语言知识</h5>
                  <p>包含文字词汇、语法部分</p>
                </el-timeline-item>
                <el-timeline-item timestamp="55分钟" placement="top">
                  <h5>阅读</h5>
                  <p>包含阅读理解部分</p>
                </el-timeline-item>
                <el-timeline-item timestamp="35分钟" placement="top">
                  <h5>听力</h5>
                  <p>包含理解内容、理解要点等部分</p>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>

      <!-- 学习课程 -->
      <el-card class="learning-courses">
        <template #header>
          <div class="card-header">
            <span>学习课程</span>
          </div>
        </template>
        <div class="courses-container">
          <div v-for="course in courses" :key="course.id" class="course-item">
            <div class="course-header">
              <div class="course-level" :class="course.levelClass">
                {{ course.level }}
              </div>
              <h3>{{ course.name }}</h3>
            </div>
            <p class="course-description">{{ course.description }}</p>
            <div class="course-features">
              <div v-for="feature in course.features" :key="feature" class="feature">
                <el-icon><Check /></el-icon>
                <span>{{ feature }}</span>
              </div>
            </div>
            <div class="course-footer">
              <div class="course-meta">
                <span class="duration">{{ course.duration }}</span>
                <span class="price">{{ course.price }}</span>
              </div>
              <el-button type="primary" @click="enrollCourse(course.id)">
                立即报名
              </el-button>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 考试时间表 -->
      <el-card class="exam-schedule">
        <template #header>
          <div class="card-header">
            <span>考试时间表</span>
          </div>
        </template>
        <div class="schedule-info">
          <p>JLPT考试每年举办两次，分别在7月和12月。</p>
          <el-table :data="examSchedule" style="width: 100%">
            <el-table-column prop="date" label="考试日期" width="120" />
            <el-table-column prop="level" label="考试等级" width="100" />
            <el-table-column prop="location" label="考试地点" />
            <el-table-column prop="deadline" label="报名截止" width="120" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === '开放报名' ? 'success' : 'info'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="bookExam(scope.row)"
                  :disabled="scope.row.status !== '开放报名'"
                >
                  报名
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

      <!-- 学习资源 -->
      <el-card class="study-resources">
        <template #header>
          <div class="card-header">
            <span>学习资源</span>
          </div>
        </template>
        <div class="resources-grid">
          <div v-for="resource in resources" :key="resource.id" class="resource-card">
            <div class="resource-icon">
              <el-icon><component :is="resource.icon" /></el-icon>
            </div>
            <div class="resource-content">
              <h4>{{ resource.name }}</h4>
              <p>{{ resource.description }}</p>
              <div class="resource-tags">
                <el-tag v-for="tag in resource.tags" :key="tag" size="small">
                  {{ tag }}
                </el-tag>
              </div>
              <el-button type="text" @click="accessResource(resource.id)">
                查看详情
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'JlptExam',
  setup() {
    const router = useRouter()
    const activeTab = ref('N1')

    const jlptLevels = ref([
      {
        name: 'N1',
        tag: '最高级',
        description: '能够理解各种场合的日语',
        vocabulary: '约10,000词',
        grammar: '高级语法',
        reading: '复杂文章',
        listening: '快速对话',
        class: 'level-n1'
      },
      {
        name: 'N2',
        tag: '高级',
        description: '能够理解日常生活中的日语',
        vocabulary: '约6,000词',
        grammar: '中级语法',
        reading: '一般文章',
        listening: '日常对话',
        class: 'level-n2'
      },
      {
        name: 'N3',
        tag: '中级',
        description: '能够理解日常生活中的基本日语',
        vocabulary: '约3,000词',
        grammar: '基础语法',
        reading: '简单文章',
        listening: '基本对话',
        class: 'level-n3'
      },
      {
        name: 'N4/N5',
        tag: '初级',
        description: '能够理解基础的日语',
        vocabulary: '约1,500词',
        grammar: '初级语法',
        reading: '简单句子',
        listening: '简单对话',
        class: 'level-n4n5'
      }
    ])

    const courses = ref([
      {
        id: 1,
        level: 'N1',
        levelClass: 'level-n1',
        name: 'N1冲刺班',
        description: '针对N1考试的强化训练，提高通过率',
        features: ['专业讲师授课', '真题解析', '模拟考试', '一对一辅导'],
        duration: '6个月',
        price: '¥8,800'
      },
      {
        id: 2,
        level: 'N2',
        levelClass: 'level-n2',
        name: 'N2基础班',
        description: '系统学习N2级别知识，打好基础',
        features: ['系统课程', '练习题库', '定期测试', '学习群'],
        duration: '8个月',
        price: '¥6,800'
      },
      {
        id: 3,
        level: 'N3',
        levelClass: 'level-n3',
        name: 'N3入门班',
        description: '从零开始学习N3级别日语',
        features: ['基础教学', '互动练习', '进度跟踪', '答疑解惑'],
        duration: '10个月',
        price: '¥5,800'
      }
    ])

    const examSchedule = ref([
      {
        date: '2024-07-07',
        level: 'N1-N5',
        location: '全国各考点',
        deadline: '2024-05-07',
        status: '开放报名'
      },
      {
        date: '2024-12-01',
        level: 'N1-N5',
        location: '全国各考点',
        deadline: '2024-10-01',
        status: '即将开放'
      }
    ])

    const resources = ref([
      {
        id: 1,
        name: 'JLPT官方指南',
        description: '官方发布的考试指南和样题',
        tags: ['官方', '权威', '免费'],
        icon: 'Document'
      },
      {
        id: 2,
        name: '词汇学习APP',
        description: '智能词汇学习工具，提高记忆效率',
        tags: ['APP', '智能', '高效'],
        icon: 'Mobile'
      },
      {
        id: 3,
        name: '语法练习册',
        description: '系统化的语法练习，巩固知识点',
        tags: ['练习', '系统', '全面'],
        icon: 'Edit'
      },
      {
        id: 4,
        name: '听力训练音频',
        description: '标准发音的听力材料，提高听力水平',
        tags: ['音频', '标准', '实用'],
        icon: 'VideoPlay'
      }
    ])

    const enrollCourse = (courseId) => {
      ElMessage.success('课程报名成功！')
    }

    const bookExam = (exam) => {
      router.push('/exam-booking')
    }

    const accessResource = (resourceId) => {
      ElMessage.success('资源访问成功！')
    }

    return {
      activeTab,
      jlptLevels,
      courses,
      examSchedule,
      resources,
      enrollCourse,
      bookExam,
      accessResource
    }
  }
}
</script>

<style scoped>
.jlpt-exam {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2.5rem;
  color: #303133;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 1.2rem;
  color: #606266;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 1.2rem;
}

.exam-intro .intro-content {
  line-height: 1.6;
}

.jlpt-levels {
  margin-top: 20px;
}

.jlpt-levels h3 {
  margin-bottom: 15px;
  color: #303133;
}

.level-card {
  padding: 20px;
  border-radius: 8px;
  height: 100%;
  border: 1px solid #ebeef5;
  transition: transform 0.3s ease;
}

.level-card:hover {
  transform: translateY(-5px);
}

.level-n1 {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
}

.level-n2 {
  background: linear-gradient(135deg, #4ecdc4, #44a08d);
  color: white;
}

.level-n3 {
  background: linear-gradient(135deg, #45b7d1, #96c93d);
  color: white;
}

.level-n4n5 {
  background: linear-gradient(135deg, #a8e6cf, #dcedc1);
  color: #333;
}

.level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.level-header h4 {
  margin: 0;
  font-size: 1.5rem;
}

.level-tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
}

.level-n4n5 .level-tag {
  background: rgba(0, 0, 0, 0.1);
}

.level-card p {
  margin-bottom: 15px;
  line-height: 1.5;
}

.level-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.9rem;
}

.tab-content h4 {
  color: #303133;
  margin-bottom: 20px;
}

.tab-content h5 {
  color: #409eff;
  margin-bottom: 8px;
}

.courses-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.course-item {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  transition: box-shadow 0.3s ease;
}

.course-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.course-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.course-level {
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9rem;
}

.course-level.level-n1 {
  background: #ff6b6b;
  color: white;
}

.course-level.level-n2 {
  background: #4ecdc4;
  color: white;
}

.course-level.level-n3 {
  background: #45b7d1;
  color: white;
}

.course-header h3 {
  margin: 0;
  color: #303133;
}

.course-description {
  color: #606266;
  margin-bottom: 15px;
  line-height: 1.5;
}

.course-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.feature {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #67c23a;
  font-size: 0.9rem;
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-meta {
  display: flex;
  gap: 15px;
}

.duration, .price {
  background: #f0f2f5;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #606266;
}

.price {
  color: #f56c6c;
  font-weight: bold;
}

.schedule-info p {
  margin-bottom: 20px;
  color: #606266;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.resource-card {
  display: flex;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.resource-icon {
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.resource-icon .el-icon {
  font-size: 2rem;
  color: #409eff;
}

.resource-content {
  flex: 1;
}

.resource-content h4 {
  margin: 0 0 10px 0;
  color: #303133;
}

.resource-content p {
  color: #606266;
  margin-bottom: 15px;
  line-height: 1.5;
}

.resource-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .jlpt-exam {
    padding: 15px;
  }
  
  .page-header h1 {
    font-size: 2rem;
  }
  
  .jlpt-levels .el-row .el-col {
    margin-bottom: 20px;
  }
  
  .resources-grid {
    grid-template-columns: 1fr;
  }
  
  .course-footer {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
}
</style>
